<template>
  <div
    ref="className"
    :class="className"
    :style="{ height: height, width: width, backgroundColor: '#001927' }"
  />
</template>
<!-- #001124 -->
<script>
import * as echarts from "echarts";
import resize from "@/mixins/resize";
import { lineOption } from "./option.js";
import save from "../../../../assets/images/screen.png";
import screenfull from "screenfull";
import { setToken } from "../../../../utils/auth.js";
export default {
  mixins: [resize],
  name: "EChart",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    // 图表数据
    lineChartAll: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Object,
      default: () => {},
    },
    times: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart(this.lineChartAll);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    aaa(data) {
      const option = lineOption(data, toolbox, this.times, this.list);
      this.$echarts.getInstanceByDom(this.$el) ||
        (this.chart = echarts.init(this.$el, "macarons"));
      this.chart.setOption(option, true);
    },

    /**
     * 图表创建初始化
     */
    initChart(data) {
      let toolbox = {
        show: true,
        top: 16,
        right: 16,
        itemSize: 20, // 设置图标大小
        feature: {
          myFull: {
            show: true,
            icon: `image://${save}`,
            title: "全屏",
            onclick: () => {
              screenfull.toggle(this.$refs.className);
            },
          },
        },
      };
      setTimeout(() => {
        const option = lineOption(data, toolbox, this.times, this.list);
        this.$echarts.getInstanceByDom(this.$el) ||
          (this.chart = echarts.init(this.$el, "macarons"));
        this.chart.setOption(option, true);
      }, 2000);
    },
  },
};
</script>
